<template>
  <div>
    <Row>
      <Card>
        <!-- 搜索栏 -->
        <Form
          ref="search"
          :model="searchData"
          :rules="searchReg"
          :label-width="80"
        >
          <Row>
            <i-col :xs="24" :md="12" :lg="6">
              <FormItem label="搜索指标" prop="name">
                <Input
                  v-model="searchData.indexName"
                  suffix="ios-search"
                  placeholder="请输入指标名称"
                  style="width: auto"
                >
                  <Icon type="ios-search" slot="suffix" />
                </Input>
              </FormItem>
            </i-col>
            <i-col :xs="24" :md="12" :lg="6">
              <FormItem label="责任单位" prop="name">
                <Input
                  v-model="searchData.cityResponUnit"
                  placeholder="请输入责任单位"
                  style="width: auto"
                ></Input>
              </FormItem>
            </i-col>
            <i-col :xs="24" :md="12" :lg="6">
              <FormItem label="牵头单位">
                <Select
                  filterable
                  clearable
                  placeholder="请输入牵头单位"
                  v-model="searchData.departCode"
                  style="width: 150px"
                >
                  <Option
                    v-for="item in getDepartmentList"
                    :value="item.departcode"
                    :key="item.departcode"
                    >{{ item.department }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col :xs="24" :md="12" :lg="6">
              <FormItem label="审核状态">
                <Select
                  clearable
                  v-model="searchData.audit"
                  style="width: 200px"
                >
                  <Option value="4">未填写</Option>
                  <Option value="0">未审核</Option>
                  <Option value="1">责任人审核</Option>
                  <Option value="2">管理员审核</Option>
                  <Option value="3">回退</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col :xs="24" :md="12" :lg="6">
              <FormItem label="年份">
                <DatePicker
                  type="year"
                  format="yyyy"
                  @on-change="searchSelectYear"
                  placeholder="按年份搜索"
                  style="width: 185px"
                  v-model="searchData.dateTime"
                ></DatePicker>
              </FormItem>
            </i-col>
          </Row>
          <FormItem>
            <Button
              v-if="btnAccess.query"
              type="primary"
              style="marigin: 0 20px"
              :loading="searchLoading"
              @click="searchSubmit(10, 1)"
              >提交搜索</Button
            >
            <Button @click="submitReset">重置搜索</Button>
          </FormItem>
        </Form>
      </Card>
    </Row>
    <!-- 表格 -->
    <Row style="margin-top: 20px">
      <Card>
        <Table
          border
          highlight-row
          :loading="tabelLoading"
          ref="currentRowTable"
          :columns="workDataTitle"
          :data="workDataContent"
        ></Table>
        <div style="margin-top: 20px; margin-left: 35%">
          <Page
            @on-change="pageNumberChange"
            :page-size="pageSize"
            :total="pageTotal"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
          />
        </div>
      </Card>
    </Row>

    <!-- 增加项目 -->
    <Modal
      @on-cancel="showState"
      v-model="isInsertModal"
      :title="'工作督查指标分数填入'"
    >
      <Form
        ref="work"
        :model="workForm"
        :rules="workFormReg"
        :label-width="110"
        inline
      >
        <FormItem label="名称指标" prop="indexName">
          <Input
            v-model="workForm.indexName"
            disabled
            placeholder="请输入指标名称"
            style="width: 300px"
          ></Input>
        </FormItem>
        <FormItem label="市考核责任单位" prop="cityResponUnit">
          <Input
            v-model="workForm.cityResponUnit"
            disabled
            placeholder="请输入市考核责任单位"
            style="width: 300px"
          ></Input>
        </FormItem>
        <FormItem label="市考核牵头单位" prop="departCode">
          <Select disabled v-model="workForm.departCode" style="width: 300px">
            <Option
              v-for="item in getDepartmentList"
              :value="item.departcode"
              :key="item.departcode"
              >{{ item.department }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="考核配合单位" prop="cooperateUnits">
          <Select
            disabled
            multiple
            placeholder="请选择考核配合单位"
            v-model="workForm.cooperateUnits"
            style="width: 300px"
          >
            <Option
              v-for="item in getDepartmentList"
              :value="item.department"
              :key="item.departcode"
              >{{ item.department }}</Option
            >
          </Select>
        </FormItem>
        <Row>
          <Col span="11">
            <FormItem label="扣分上限" prop="maxPoint">
              <InputNumber
                disabled
                :max="10"
                :min="0"
                :step="0.1"
                v-model="workForm.maxPoint"
              ></InputNumber>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="实际扣分" prop="score">
              <InputNumber
                :disabled="isDisabledSubmit"
                :max="workForm.maxPoint"
                :min="0"
                :step="0.01"
                v-model="workForm.score"
              ></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
            <FormItem label="指标年月" prop="dateTime">
              <DatePicker
                type="month"
                format="yyyyMM"
                @on-change="workSelectYear"
                placeholder="按年份搜索"
                style="width: auto"
                :value="workForm.dateTime"
              ></DatePicker>
            </FormItem>
          </Col>
          <!-- <Col span="11">
            <FormItem label="填入月份" prop="monthTime">
              <Select
                clearable
                :disabled="isDisabledSubmit"
                v-model="workForm.monthTime"
                style="width:80px"
              >
                <Option value="01">1月</Option>
                <Option value="02">2月</Option>
                <Option value="03">3月</Option>
                <Option value="04">4月</Option>
                <Option value="05">5月</Option>
                <Option value="06">6月</Option>
                <Option value="07">7月</Option>
                <Option value="08">8月</Option>
                <Option value="09">9月</Option>
                <Option value="10">10月</Option>
                <Option value="11">11月</Option>
                <Option value="12">12月</Option>
              </Select>
            </FormItem>
          </Col>-->
        </Row>
        <FormItem
          label="回退原因"
          prop="maxPoint"
          v-if="workForm.reason !== null"
        >
          <Input
            disabled
            v-model="workForm.reason"
            type="textarea"
            style="width: 170%"
            :rows="1"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          v-if="btnAccess.upd"
          type="primary"
          :disabled="isDisabledSubmit"
          :loading="submitloading"
          style="width: 120px"
          @click="workSubmit"
        >
          <span v-if="!submitloading">提交</span>
          <span v-else>提交中...</span>
        </Button>
        <Button @click="closeModal">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { hasOneOf } from "@/libs/tools";
import { workAjax } from "@/api/workSupervision";
// 查询URL
const QUERY_URL = "/workScore/query";
// 修改URL
const UPDATE_URL = "/workScore/update";
// 添加URL
const INSERT_URL = "/workScore/insert";
// 是否审核通过路径
const THROUGH_URL = "/workScore/auditProdure ";
export default {
  data() {
    return {
      // 增删改查权限按钮
      btnAccess: {
        add: true,
        add2: "inline-block",
        del: "inline-block",
        upd: true,
        query: true,
      },
      // 是否为超级管理员
      isSpuerAdmins: {
        add: true,
        action: "inline-block",
      },
      modalTitle: "", // 模态框title
      submitloading: false, // 提交loading
      searchLoading: false, // 搜索loading
      tabelLoading: false,
      isInsertModal: false, // 模态框
      pageSize: 10,
      pageNumber: 1,
      pageTotal: 10,
      searchData: {
        cityResponUnit: "", // 责任单位
        departCode: "", // 牵头单位
        audit: "", // 审核状态
        indexName: "", // 指标名称
        dateTime: "", // 年份
      },
      isDisabledSubmit: false,
      workForm: {
        cityResponUnit: "", // 责任单位
        cooperateUnits: [], // 配合单位
        departCode: "", // 牵头单位
        indexName: "", // 指标名称
        dateTime: "", // 年份
        monthTime: "", // 月份
        audit: "", // 审核状态
        score: 0, // 分数
        maxPoint: 0, // 分数上线
        reason: "", // 回退原因
      },
      searchReg: {},
      workFormReg: {
        dateTime: [
          {
            required: true,
            message: "请选择年月份",
            trigger: "change",
          },
        ],
        score: [
          {
            required: true,
            message: "填分数",
            type: "number",
            trigger: "change",
          },
        ],
      },
      workDataTitle: [
        {
          title: "序号",
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "指标名称",
          key: "indexName",
        },
        {
          title: "实际扣分/扣分上限",
          width: 160,
          render: (h, params) => {
            // 宽度占比
            var pressWidth = "";
            // 实际扣分
            var actualPoint = params.row.score === null ? 0 : params.row.score;
            if (params.row.score !== null) {
              pressWidth = (params.row.score / params.row.maxPoint) * 120;
            } else {
              pressWidth = 0;
            }
            return h(
              "div",
              {
                style: {
                  position: "relative",
                },
              },
              [
                h("div", {
                  style: {
                    position: "relative",
                    width: "120px",
                    height: "30px",
                    lineHeight: "30px",
                    marginRight: "5px",
                    background: "#999",
                    color: "#fff",
                  },
                }),
                h(
                  "div",
                  {
                    style: {
                      position: "absolute",
                      marginTop: "-30px",
                      width: pressWidth.toFixed(0) + "px",
                      height: "30px",
                      background: "#FF6975",
                    },
                  },
                  ""
                ),
                h(
                  "div",
                  {
                    style: {
                      position: "absolute",
                      marginTop: "-23px",
                      color: "#fff",
                      width: "120px",
                      height: "20px",
                      fontSize: "16px",
                      lineHeight: "20px",
                      textAlign: "center",
                      whiteSpace: "pre",
                    },
                  },
                  actualPoint + "   /   " + params.row.maxPoint
                ),
              ]
            );
          },
        },
        {
          title: "市考核责任单位",
          key: "cityResponUnit",
        },
        {
          title: "工作目标牵头单位",
          key: "leadUnit",
        },
        {
          title: "考核配合单位",
          key: "cooperateUnit",
        },
        {
          title: "审核状态",
          key: "audit",
          maxWidth: 120,
          render: (h, params) => {
            var typeColor = "";
            var text = "";
            var isGhost = false;
            switch (params.row.audit) {
              case null:
                typeColor = "default";
                text = "未填写";
                isGhost = false;
                break;
              case "0":
                typeColor = "warning";
                text = "未审核";
                isGhost = true;
                break;
              case "1":
                typeColor = "primary";
                text = "通过";
                isGhost = true;
                break;
              case "2":
                typeColor = "success";
                text = "未通过";
                isGhost = true;
                break;
              default:
                break;
            }
            return h(
              "Button",
              {
                props: {
                  type: typeColor,
                  ghost: isGhost,
                },
              },
              text
            );
          },
        },
        {
          title: "操作",
          key: "action",
          width: 360,
          align: "center",
          render: (h, params) => {
            // 通过后就禁止按钮
            let isBan = false;
            if (params.row.audit === "1") {
              isBan = true;
            }
            var typeColor = "";
            var text = "";
            var isDisabled = false;
            switch (params.row.audit) {
              case null:
                typeColor = "primary";
                text = "填写分数";
                break;
              case "0":
                typeColor = "primary";
                text = "修改分数";
                break;
              case "1":
                typeColor = "primary";
                text = "填写分数";
                break;
              case "2":
                typeColor = "success";
                text = "填写完成";
                break;
              case "3":
                typeColor = "error";
                text = "重新填写";
                break;
              default:
                break;
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: typeColor,
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.isInsertModal = true;
                      // 填写分数 可以提交
                      this.isDisabledSubmit = false;
                      // 表格数据 进行深拷贝
                      this.workForm = JSON.parse(JSON.stringify(params.row));
                      this.workForm.maxPoint =  Math.abs(this.workForm.maxPoint)
                      this.workForm.score = Math.abs(this.workForm.score)
                      console.log(this.workForm);
                    },
                  },
                },
                text
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.workForm = JSON.parse(JSON.stringify(params.row));
                      console.log(this.workForm);
                      this.isInsertModal = true;
                      // 填写分数 可以提交
                      this.isDisabledSubmit = true;
                    },
                  },
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    disabled: isBan,
                  },
                  style: {
                    marginRight: "5px",
                    display: this.isSpuerAdmins.action,
                  },
                  on: {
                    click: () => {
                      this.workForm = JSON.parse(JSON.stringify(params.row));
                      console.log(this.workForm);
                      this.workForm.audit = "1"; // 0:未审核 1：通过  2：未通过
                      // 通过请求
                      this._workAjax(THROUGH_URL, this.workForm).then(
                        (result) => {
                          if (result.code === "200") {
                            this.$Message.success(result.message);
                            this._getWorkeData(
                              this.searchData,
                              QUERY_URL,
                              this.pageSize,
                              this.pageNumber
                            );
                          } else {
                            this.$Message.error(result.message);
                          }
                        }
                      );
                    },
                  },
                },
                "通过"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    disabled: isBan,
                  },
                  style: {
                    marginRight: "5px",
                    display: this.isSpuerAdmins.action,
                  },
                  on: {
                    click: () => {
                      this.workForm = JSON.parse(JSON.stringify(params.row));
                      // 未通过请求
                      this.workForm.audit = "2"; // 0:未审核 1：通过  2：未通过
                      this._workAjax(THROUGH_URL, this.workForm).then(
                        (result) => {
                          if (result.code === "200") {
                            this.$Message.success(result.message);
                            this._getWorkeData(
                              this.searchData,
                              QUERY_URL,
                              this.pageSize,
                              this.pageNumber
                            );
                          } else {
                            this.$Message.error(result.message);
                          }
                        }
                      );
                    },
                  },
                },
                "未通过"
              ),
            ]);
          },
        },
      ],
      workDataContent: [],
    };
  },
  methods: {
    showState() {
      this.$refs["work"].resetFields();
    },
    // 重置搜索内容
    submitReset() {
      this.searchData = {
        cityResponUnit: "", // 责任单位
        departCode: "", // 牵头单位
        indexName: "", // 指标名称
        dateTime: "", // 年份
        audit: "",
      };
      this.searchLoading = false;
    },
    // 搜索提交
    searchSubmit(pageSize, pageNumber) {
      this.pageSize = pageSize;
      this.pageNumber = pageNumber;
      this.searchLoading = true;
      this._getWorkeData(
        this.searchData,
        QUERY_URL,
        this.pageSize,
        this.pageNumber
      );
    },
    // 关闭模态框
    closeModal() {
      this.isInsertModal = false;
    },
    // 工作督查指标提交
    workSubmit() {
      this.$refs["work"].validate((valid) => {
        if (valid) {
          this.submitloading = true;
          var url = "";
          // 根据审核状态 判断 修改还是添加
          if (this.workForm.audit === null) {
            url = INSERT_URL;
          } else {
            url = UPDATE_URL;
          }
          this._workAjax(url, this.workForm).then((result) => {
            this.submitloading = false;
            if (result.code === "200") {
              this.isInsertModal = false;
              this.$Message.success("添加成功");
              // 添加成功 重新查询
              this._getWorkeData(
                this.searchData,
                QUERY_URL,
                this.pageSize,
                this.pageNumber
              );
            } else {
              this.$Message.error("添加失败！请刷新页面后尝试");
            }
          });
        } else {
          this.$Message.error("带*为必填项");
        }
      });
    },
    // 删除工作督查指标
    workRemove(index) {},
    // 搜索年份时间转换
    searchSelectYear(year) {
      this.searchData.dateTime = year;
    },
    // 工作督查指标年份
    workSelectYear(year) {
      this.workForm.dateTime = year;
    },
    // 页码
    pageNumberChange(pageNumber) {
      this.pageNumber = pageNumber;
      this._getWorkeData(
        this.searchData,
        QUERY_URL,
        this.pageSize,
        this.pageNumber
      );
    },
    // 页数
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getWorkeData(
        this.searchData,
        QUERY_URL,
        this.pageSize,
        this.pageNumber
      );
    },
    // 文件上传成功
    handleSuccess(res, file) {
      if (res.code === "200") {
        this.$Notice.success({
          title: res.message,
          desc: res.results,
        });
      } else {
        this.$Notice.error({
          title: res.message,
          desc: res.results,
        });
      }
    },
    // 验证上传格式
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "文件" + file.name + " 格式错误, 请选择xls或者xlsx",
      });
    },
    // 添加编辑AJAX
    _workAjax(url, formData) {
      const keyOne = "workScoreEntity";
      return new Promise((resolve, reject) => {
        workAjax({ url, formData, keyOne })
          .then((result) => {
            if (result.data !== undefined) {
              resolve(result.data);
            } else {
              reject(err);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    // 获取新闻
    _getWorkeData(formData, url, pageSize, pageNumber) {
      this.tabelLoading = true;
      formData = Object.assign(formData, {
        pageSize,
        pageNumber,
      });
      const keyOne = "workScoreFilter";
      workAjax({ formData, url, keyOne })
        .then((result) => {
          this.tabelLoading = false;
          if (result.data.code === "200") {
            this.searchLoading = false;
            this.workDataContent = result.data.results.list;
            this.pageTotal = parseInt(result.data.results.pageTotal) * 10;
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this._getWorkeData(
      this.searchData,
      QUERY_URL,
      this.pageSize,
      this.pageNumber
    );
    // 获取按钮权限
    let btnAccess = sessionStorage.getItem("btnaccess");
    this.globalFunction(btnAccess);
    // 获取是否为超级管理员
    let isSuperAdmin = sessionStorage.getItem("isSuperAdmin");
    this.globalFunction2(isSuperAdmin);
  },
  computed: {
    getDepartmentList() {
      return this.$store.state.user.departmentList;
    },
  },
  mounted() {
    var _this = this;
    setTimeout(function () {
      console.log("111")
      console.log(_this.workForm.score);
    },2000);
  },
};
</script>
<style>
.ivu-input[disabled],
fieldset[disabled] .ivu-input {
  color: #333;
}
.ivu-input-number-input[disabled] {
  color: #333;
}
</style>
